<template>
    <span :class='{"update-data": !noIconForCol && (isUpdate || isAddNode(data.id))}' class='hide-par'>
        <a-auto-complete v-if="isEdit" v-model="inpValue" :filter-option="filterOption" class='edit-input' :data-source="keyNodes" @change="handleChange"/>
        <template v-else>
            <a-auto-complete v-if="editAble || isAddData" ref='ref_input' v-model='inpValue' placeholder='新建任务'
                :filter-option="filterOption" :data-source="keyNodes" @change="handleChange" @blur='hideHandler'/>
            <span v-else :style="{ 'paddingLeft': `${marginLeft}px` }" class="tree-node hide-par">
                <span v-if="!isChild" class="icon-arrow" :style="{ 'left': `${marginLeft - 19}px` }">
                    <a-icon v-if="!isFolder" type="minus-square" @click='showFlagChange'/>
                    <a-icon v-else type="plus-square" @click='showFlagChange'/>
                </span>
                <a-tooltip>
                    <template slot="title">
                        {{data[word]}}
                    </template>
                    <span class='no-warp' @click="showSel" 
                        :class='{"parent-node": !isChild}'>{{data[word]}}</span>
                </a-tooltip>
            </span>
        </template>
    </span>
</template>
<script>
import { mapGetters } from 'vuex'
import mix from '../js/mainTable'
export default {
    mixins:[mix],
    data() {
        return {
            leftSize: 15
        }
    },
    computed: {
        ...mapGetters({
            editColumns: 'getEditColumns',
            keyNodes: 'getKeyNodeNames'
        }),
        valData() {
            return this.inpValue && this.inpValue.trim() != '' ? this.inpValue : this.data[this.word]
        },
        marginLeft() {
            return this.leftSize * this.data.parentIds.length
        },
        isAddData() {
            return this.data.addNode != undefined && this.data.addNode 
                && this.editColumns.includes(this.columnInfo.dataIndex)
        },
        isFolder() {
            return this.data.isFolder
        }
    },
    methods: {
        filterOption(input, option) {
            return (
                option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
            );
        },
        //树形数据展开收起
        showFlagChange() {
            const targetId = this.data.id
            // const targetIndex = this.dataSource.findIndex(item => item.id == targetId)
            if(this.isFolder) {
                //展示数据下一层数据
                for(let i = 0, len = this.dataSource.length; i < len; i++) {
                    if (this.dataSource[i].parentIds[this.dataSource[i].parentIds.length - 1] == targetId) {
                        let result = this.dataSource[i]
                        result.show = true
                        result.isFolder = true;
                        this.setRowOfPlanTable(result)
                    }
                }
            }else {
                //隐藏数据
                for(let i = 0, len = this.dataSource.length; i < len; i++) {
                    if (this.dataSource[i].parentIds.includes(targetId)) {
                        let result = this.dataSource[i]
                        result.show = false
                        this.setRowOfPlanTable(result)
                    }
                }
            }
            this.data.isFolder = !this.data.isFolder
            this.setRowOfPlanTable(this.data)
        },
        showSel() {
            if (this.columnInfo.edit && this.data.actionPerssion && this.statePermission &&
                (this.data['lock.locked'] == undefined || !this.data['lock.locked'])) {
                this.editAble = true
                this.$nextTick(() => {
                    this.inpValue = this.valData
                    this.$refs.ref_input.focus();
                })
            }
            
        },
        handleChange() {
            if (this.valData != this.data[this.word])
                this.$emit('update',this.valData)
        },
        hideHandler() {
            if(!this.isAddData)
                this.editAble = false
        }
    }
}
</script>
<style scoped>
.edit-input {
    width: 100%
}
.tree-node {
    margin-left: 10px;
}
.icon-arrow {    
    margin-left: -18px;
    margin-right: 5px;
    color: #aaa;
    float: left;
}
.parent-node {
    font-weight: bold;
    /* color: #000; */
    color: #666;
}
.hide-par {
    display: inherit;
    width: 100%;
    height: 100%;
}
.no-warp {
    display: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: 100%;
}
.tips{
     background-color: #000 !important;
}
</style>